﻿<!DOCTYPE html>
<html lang="zh-Hans" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="frontInclude :: frontHeader"/>
<body>
<header class="header opaque" th:replace="frontInclude :: header_menu"></header>

<style>
    .tabs-group {
        position: relative;
        overflow-y: hidden;
    }

    .tabs-group .title {
        float: left;
        padding: 10px 0;
        width: 80px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }

    .tabs-group .content {
        list-style: none;
        padding: 0;
        margin: 0 0 0 60px;
    }

    .tabs-group .content > li {
        float: left;
        padding: 5px 12px;
    }

    .tabs-group .content > li > a {
        display: block;
        padding: 5px 10px;
        border: none;
        -webkit-border-radius: 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 4px;
        -moz-background-clip: padding;
        border-radius: 4px;
        background-clip: padding-box;
        color: #333;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .tabs-group .content > li.active > a,
    .tabs-group .content > li:focus > a,
    .tabs-group .content > li:hover > a {
        color: #fff;
    }
</style>
<div class="container Wauto">
    <div class="bnBox cateBn">
        <div class="cateBnImg" style="background-image: url(/css/assets/images/banner6.jpeg)">

        </div>
    </div>
    <div class="main w1200">
        <div class="article w1">
            <div class="archive-top anim fadeInUp">
                <div class="archive-title">
                    <h1>产品中心</h1>
                    <span></span>
                </div>
                <div class="archive-description">
                    <p></p>
                </div>
            </div>
            <div class="subcate anim fadeInUp" data-wow-delay=".3s">
                <div id="subcate" data-type="category" data-infoid="2">
                    <ul>
                    </ul>
                </div>
<!--                <div class="tabs-group">-->
<!--                    <div class="title">Color:</div>-->
<!--                    <ul class="content clearfix">-->
<!--                        <li class="active"><a href="product-1.html">All</a></li>-->
<!--                        <li class=""><a href="product-10.html?color=1">Red</a></li>-->
<!--                        <li class=""><a href="product-11.html?color=2">Green</a></li>-->
<!--                        <li class=""><a href="product-12.html?color=3">Yellow</a></li>-->
<!--                        <li class=""><a href="product-13.html?color=4">Black</a></li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="tabs-group">-->
<!--                    <div class="title">Type:</div>-->
<!--                    <ul class="content clearfix">-->
<!--                        <li class="active"><a href="product-1.html">All</a></li>-->
<!--                        <li class=""><a href="product-14.html?types=0">Basics</a></li>-->
<!--                        <li class=""><a href="product-15.html?types=1">Major</a></li>-->
<!--                        <li class=""><a href="product-16.html?types=2">Flagship</a></li>-->
<!--                    </ul>-->
<!--                </div>-->
            </div>
            <div class="post list">
                <div class="PostShow">
                    <ul>
                        <li th:data-id="${item.id}" th:each="item : ${page.rows}"  class="anim fadeInUp">
                            <div class="post-img loading"><a class="pic float-left" th:href="${'/front/articleView/'+item.id}"
                                                             th:title="${item.articleTitle}" rel="bookmark">
                                <div class="msk"></div>
                                <i class="fa fa-search"></i>
                                <img class="b-lazy" th:src="${item.articleLogo}"
                                     th:data-src="${item.articleLogo}"
                                     th:alt="${item.articleTitle}"> </a></div>
                            <a th:href="${'/front/articleView/'+item.id}"
                               th:title="${item.articleTitle}">
                                <h4 th:text="${item.articleTitle}">产品标题</h4>
                                <i class="h2" th:if="${#strings.isEmpty(item.articleDescribe)}==false and ${#strings.length(item.articleDescribe)} >50" th:text="${#strings.substring(item.articleDescribe,0,50)+'...'}">产品简介</i>
                                <i class="h2" th:if="${#strings.isEmpty(item.articleDescribe)}==false and ${#strings.length(item.articleDescribe)} <=50" th:text="${item.articleDescribe}">产品简介</i>

                                <div class="pt-2">
                                    <i class="fa fa-long-arrow-right"></i>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>

        </div>
        <div class="text-center" th:replace="frontInclude :: pagination"></div>
    </div>
</div>

<div th:replace="frontInclude :: footer"></div>
</body>
</html>